<template>
	<view class="suggestion">

		<view class="sugbox">
			<view class="sugtit">
				<text class="tit1">问题反馈类型</text>
			</view>
			<view class="btnbox">
				<view class="btn" :class="[detail.type == key ? 'chosed' : '']" v-for="(value, key) in types" :key="key">
					{{value}}
				</view>
			</view>
			<view class="textbox">
				<textarea class="textarea" v-model="detail.content" :placeholder="placeholderText"
					placeholder-class="placeholder" disabled></textarea>
				<view class="len"><text class="len_cnt">{{detail.content.length ? detail.content.length : 0}}</text>/100
				</view>
			</view>

			<view class="imgbox" v-if="detail.images && detail.images.length > 0">
				<view class="addimgbox" v-for="(item, index) in detail.images" :key="index">
					<view class="box">
						<image class="addimg" :src="item" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="phonebox">
				<text class="mobiletext">手机号(*必填项):</text>
				<input class="mobile" disabled type="number" maxlength="11" v-model="detail.mobile" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		suggestType,
		getSuggestList
	} from "@/api/my/my.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				id: null,
				types: null,
				detail: null,
				placeholderText: "请选择反馈类型，并填写10字以上的反馈，我们将尽快为您解决…",
			}
		},
		async onLoad(e) {
			this.id = e.id
			
			suggestType().then(({
				data: {
					type: types
				}
			}) => {
				this.types = types
			})
			
			let res = await getSuggestList()
			if(res.code == 200) {
				this.detail = res.data.feedbackts.filter((item=> {return +item.id === +this.id}))[0]
			}
		}
	}
</script>

<style scoped>
	.sugbox {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 24rpx 0;
	}

	.tit1 {
		font-size: 32rpx;
		color: #070707;
		font-weight: bold;
	}

	.btnbox {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn {
		width: 30%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		border: 1px solid #cfcfcf;
		font-size: 26rpx;
		color: #8a8a8a;
		text-align: center;
	}

	.btn.chosed {
		color: #F54642;
		border: 1px solid #F54642;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		border: 1px solid #e2e2e2;
		box-sizing: border-box;
		padding: 20rpx;
	}

	/deep/ .placeholder {
		font-size: 24rpx;
		color: #b4b4b4;
		line-height-step: 40rpx;
	}

	.textbox {
		position: relative;
		width: 100%;
		height: 300rpx;
	}

	.len {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		font-size: 24rpx;
		color: #B4B4B4;
	}

	.len_cnt {
		color: #F54642;
	}

	.imgbox {
		margin: 42rpx auto 0;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.addimgbox {
		margin: 0 32rpx 40rpx 0;
		width: 144rpx;
		height: 144rpx;
		position: relative;
	}

	.addimgbox .box {
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
		border: 1px dashed gray;
	}

	.addimg {
		width: 144rpx;
		height: auto;
	}

	.phonebox {
		margin: 20px auto 0;
		width: 100%;
		height: 92rpx;
		background-color: #F1F1F1;
		border-radius: 8rpx;
		line-height: 92rpx;
		color: #4B4B4B;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.mobiletext {
		display: inline-block;
		vertical-align: middle;
	}

	.mobile {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
		height: 92rpx;
		line-height: 92rpx;
	}
</style>
